<template>
  <div class="flowSetting">
    <section class="dingflow-design">
      <!-- 放大缩小 -->
      <div class="zoom">
        <a-button icon="minus" :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')" @click.stop="zoomSize(1)" />
        <span class="zoom-span">{{ nowVal }}%</span>
        <a-button icon="plus" :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')" @click.stop="zoomSize(2)" />
      </div>
      <!-- 流程设计 开始 -->
      <div class="box-scale" :style="`transform: scale(${nowVal / 100}); transform-origin: 50% 0px 0px;`">
        <NodeWrapper :process.sync="value" :formlist="formlist" :node-id="nodeId" class="mg_t20" />
        <!-- 流程设计 开始 -->
        <!-- 流程设计 结束 -->
        <div class="flow-container">
          <div class="end-node">
            <div class="end-node-circle" />
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
        <!-- 流程设计 结束 -->
      </div>
    </section>
  </div>
</template>
<script>
import NodeWrapper from "../NodeWrapper";
import { getFlowDetailReq } from "../../api";
export default {
  name: "FlowSetting",
  components: {
    NodeWrapper
  },
  props: {
    value: {
      type: Object,
      default: () => {}
    },
    formlist: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 放大系数
      nowVal: 100,
      nodeId: 0
    };
  },

  methods: {
    // 获取流程进程
    getDetail() {
      getFlowDetailReq(this.$route.query.id).then(({ data }) => {
        this.$emit("flowProcessChange", this.deep(data));
      });
    },
    deep(data) {
      if (data.props) {
        if (typeof data.props === "string" && data.nodeType !== "start") {
          data.props = JSON.parse(data.props);
        }
      }
      if (data.childNode) {
        this.deep(data.childNode);
      }
      return data;
    },
    /* 放大缩小 */
    zoomSize(type) {
      if (type === 1) {
        if (this.nowVal === 50) {
          return this.nowVal === 50;
        }
        return (this.nowVal -= 10);
      } else {
        if (this.nowVal === 300) {
          return this.nowVal === 300;
        }
        return (this.nowVal += 10);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/processSet.scss";
</style>
